<template>
  <div class="arcontainer">
    <!-- <div class="go">
      <span @click="goback">返回</span>
    </div>-->
    <div class="articlebox">
      <h1 v-html="content.title"></h1>
      <div id="arother">
        <div class="category">
          <span class="cate_item" v-for="(item, index) in category" :key="index">{{ item }}</span>
        </div>
        <div class="date">
          发布于:
          {{ content.date | chatDateFormate }}
        </div>
        <div>
          浏览:
          {{ views }}
        </div>
      </div>
      <div v-highlight class="markdown-body" v-html="content.content"></div>
    </div>
    <div class="comment_box">
      <comment :id="id" :title="content.title"></comment>
    </div>
  </div>
</template>
<script>
import 'mavon-editor/dist/css/index.css'
import Comment from '../../components/comment/comment'
import request from '../../api/request'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      id: '',
      category: [],
      content: {},
      views: null,
      distance: null, //home页面滚动条滚动的距离
      page: null //home页面传递的页码
    }
  },
  components: {
    Comment
  },
  created() {
    // 接收home传递过来的页码和vuescroll滚动的距离
    const { distance, page, id } = this.$route.query
    this.id = id
    this.distance = distance
    this.page = page
    this.getarticle()
    this.$store.commit('updatePath', '/module/article')

    this.$EventBus.$on('articleBack', this.goback)
  },

  watch: {
    // 监听路由参数改变来解决搜索文章点击搜索结果，页面无法更新的问题
    $route: function (newVal, oldVal) {
      this.$EventBus.$emit('goTop') // 触发module的滚动事件
      this.getarticle()
      const { distance, page, id } = this.$route.query
      this.id = id
    }
  },
  computed: {
    ...mapGetters(['getIsLogin'])
  },
  methods: {
    async getarticle() {
      let res = await request({
        url: '/article/get',
        data: { id: this.$route.query.id },
        method: 'get'
      })
      this.content = Object.freeze(res.data[0])
      this.category = Object.freeze(this.content.category)
      this.views = Object.freeze(this.content.views)
      let result = await request({
        url: '/article/category',
        data: {
          category: this.category[0]
        },
        method: 'get'
      })
      this.$store.commit('updateCategoryArticle', result.data)
    },
    goback() {
      this.$router
        .push({
          path: '/main',
          query: { distance: this.distance, page: this.page }
        })
        .catch((err) => {
          // console.log(err)
        })
    }
  }
}
</script>
<style lang="scss">
@import '../../scss/common.scss';
@media (max-width: 600px) {
  .arcontainer {
    width: 100vw;
    height: 100%;
    position: relative;
    background: white;
  }
  .articlebox {
    background: white;
    width: 100vw;
    box-sizing: border-box;
    margin-top: 0px;
    padding: 0 0.625rem;
    h1 {
      line-height: 40px;
      font-size: 26px;
      font-weight: bold;
      text-align: center;
      width: 100%;
      margin-top: 0px;
      padding-top: 10px;
    }
    #arother {
      text-align: left;
      width: 100%;
      margin-top: 5px;
      margin-bottom: 20px;
      display: flex;
      background: #f7f7fc;

      display: flex;
      align-items: center;
      border-radius: 4px;
      padding: 0px 20px;
      box-sizing: border-box;
      flex-wrap: wrap;
      div {
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color: rgb(124, 124, 124);
        margin: 8px 0px;
      }
      .category {
        margin-right: 30px;
        .cate_item {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0px 5px;
          min-width: 35px;
          box-sizing: border-box;
          background: $ar_color;
          color: rgb(255, 255, 255);
          border-radius: 4px;
        }
      }
      .date {
        padding-right: 30px;
      }
    }

    img {
      margin-top: 10px;
    }
  }
  .markdown-body {
    padding-bottom: 20px;
  }
}
@media (min-width: 600px) {
  .arcontainer {
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 20px;
  }
  .articlebox {
    margin-top: 20px;
    background: white;
    width: 100%;
    max-width: 1000px;
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
    #arother {
      text-align: left;
      width: 100%;
      margin-top: 5px;
      margin-bottom: 20px;
      display: flex;
      background: #f7f7fc;
      height: 50px;
      display: flex;
      align-items: center;
      line-height: 40px;
      border-radius: 4px;
      padding: 0px 20px;
      box-sizing: border-box;
      div {
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color: rgb(124, 124, 124);
      }
      .category {
        margin-right: 30px;
        .cate_item {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0px 5px;
          min-width: 35px;
          box-sizing: border-box;
          background: $ar_color;
          color: rgb(255, 255, 255);
          border-radius: 4px;
        }
      }
      .date {
        padding-right: 30px;
      }
    }
    img {
      margin-top: 10px;
    }
  }
  .markdown-body {
    padding-bottom: 20px;
  }
  .comment_box {
    margin-top: 20px;
    padding: 20px;
    background: white;
  }
}
</style>
